<template>
  <div class="operations-message-wrapper">
    <el-form class="query-form"
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      size="small">
        <el-form-item label="项目" prop="appid">
          <el-select v-model="queryParams.appid"
            placeholder="请选择"
          >
            <el-option label="全部" :value="null"/>
            <el-option v-for="item in permission_projectList" :key="item.dictValue"
              :label="item.name"
              :value="item.app_id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            size="small"
            @click="handleQuery">搜索</el-button>
          <el-button size="small"
            @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

    <el-button type="primary"
      style="margin-bottom:10px"
      icon="el-icon-plus"
      size="small"
      @click="handleAdd"
    >
      新增
    </el-button>

    <el-table v-loading="loading" :data="tableList" style="width:100%">
      <el-table-column label="序号" type="index"  width="100" > </el-table-column>
      <el-table-column label="项目" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.app_id | translateToName(permission_projectList,'app_id','name') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员（台数）" align="center">
        <el-table-column label="在线设备" prop="vip_online_device" align="center"/>
        <el-table-column label="历史设备" prop="vip_history_device" align="center"/>
      </el-table-column>
      <el-table-column label="非会员（台数）" align="center">
        <el-table-column label="在线设备" prop="user_online_device" align="center"/>
        <el-table-column label="历史设备" prop="user_history_device" align="center"/>
      </el-table-column>
      <el-table-column label="操作" width="140" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="handleDetail(scope.row, 'view')">详情</el-button>
          <el-button size="small" type="text" @click="handleDetail(scope.row, 'edit')">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0"
        :total="total"
        layout="total,slot,sizes,prev,pager,next,jumper"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.page_size"
        @pagination="getList" />
    <DeviceAddDialog ref="addDialogRef" @update="getList" />
  </div>
</template>

<script>
import { getDeviceList } from '@/api/operations/device'
import { mapGetters } from 'vuex'
import DeviceAddDialog from './device-add-dialog.vue'

export default {
  name: 'DeviceManage',
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  components: {
    DeviceAddDialog
  },
  data () {
    return {
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        page_size: 10,
        appid: null
      },
      // 表格
      loading: false,
      tableList: []
    }
  },
  methods: {
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleQuery () {
      this.queryParams.page = 1
      this.getList()
    },
    getList () {
      this.loading = true
      getDeviceList(this.queryParams).then(res => {
        this.tableList = res.data.list || []
        this.total = res.data.count || 0
      }).finally(() => {
        this.loading = false
      })
    },
    handleAdd () {
      this.$refs.addDialogRef.open()
    },
    handleDetail (item, type) {
      this.$refs.addDialogRef.open(item, type)
    }
  },
  created () {
    this.getList()
  }
}
</script>
